<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/zhuzijian/login_zzj.css"/>
		
	</head>
	<body id="body">
		<div id="box" class="box">
			<div class="logo"><img width="600px" src="images/zhuzijian/logo.png" ></div>
			<form>
			<div class="shurukuang">
				<div class="zhanghao"><input required id="u"  autocomplete ="off" type="text" name="" placeholder="QQ号码/手机/邮箱"  value="" /></div>
				<div><input required id="p"  autocomplete ="off" type="password" placeholder="请输入你的QQ密码" name=""  value="" /></div>
			</div>
			
			<div id="dl" class="denglu" onclick="login()">登录</div>
			 </form>
			
			<a class="yijiandenglu" href="#">一键登录</a>
			
			<div class="bot clearfix">
				<a class="fl" href="forget.html">忘了密码</a>
				<a class="fr" href="reg.html">注册新账号</a>
			</div>
			<!-- 加载动画开始 -->
			<img id="jz" class="jiazai" src="./images/zhuzijian/jiazai.svg" >
			<img id="jz2" class="jiazai2" src="./images/zhuzijian/jiazai.svg" >
			<!-- 加载动画结束 -->
		</div>
		<div id="tt" class="tankuang">
			<img width="60px" src="./images/zhuzijian/info1.png" > 你还没有输入账号！
		</div>
		<div id="tt2" class="tankuang2">
			<img width="60px" src="./images/zhuzijian/info1.png" > 你还没有输入密码！
		</div>
		
		<div class="qqdenglu" id="qq">
			<img width="120px" src="./images/zhuzijian/logo.png"><span id="qqspan">点击用QQ登录</span>
		</div>
		<div id="box2">
			<div id="applogo">
				<img width="300px" src="images/zhuzijian/applogo.png" >
			</div>
			<div class="denglu22" id="shoujihao">手机号登录</div>
			<form id="biaoge">
			<div class="shurukuang" style="width:85%;">
				<div class="zhanghao"><input required id="u2"  autocomplete ="off" type="text" name="" placeholder="账号名称/手机/邮箱"  value="" /></div>
				<div><input required id="p2"  autocomplete ="off" type="password" placeholder="请输入你的密码" name=""  value="" /></div>
			</div>
			<div class="fuxuankuang clearfix">
				<div class="fl">记住密码<input type="checkbox"  style="width: 68px;height: 33px;border:1;font-size:20px;text-indent:0;"/> </div>
				<div class="fr">自动登录<input type="checkbox" checked  style="width: 68px;height: 33px;border:1;font-size:20px;text-indent:0;"/> </div>
			</div>
			<div id="dl2" class="denglu33" onclick="login2()">登录</div>
			<div class="bot clearfix" style="width:85%;">
				<a class="fl" href="forget.html">忘了密码</a>
				<a class="fr" href="reg.html">注册新账号</a>
			</div>
			 </form>
			<a class="yijiandenglu22" id="shoujihaozhuce" href="reg.html">手机号快捷注册</a>
		</div>
	</body>
	<script type="text/javascript">
		 var d="1"
		   qq.onclick=function(){
		      if(d==1){
		      box.style.height="1600px";
		      body.style.background="none";
			  body.style.background="#eee";
			  box2.style.display="none";
			  document.getElementById("qqspan").innerHTML = "返回";
			  jz2.style.display="none";
			  dl2.style.background=" #146fdf";
			  document.getElementById("dl2").innerHTML = "登录";
		       d="0";
		     }else{
		        box.style.height="20px";
		        body.style.background="url(images/zhuzijian/bodybg.png) no-repeat";
				box2.style.display="block";
				document.getElementById("qqspan").innerHTML = "点击使用QQ登录";
				jz.style.display="none";
		        d="1";
		}
		}
		
		
		function login(){
		   if(u.value=="123456"){
		      if(p.value=="123456"){
		           tt2.style.display="none";
				   tt.style.display="none";
				   document.getElementById("dl").innerHTML = "登录中......";
				   dl.style.background="green";
				   jz.style.display="block";
		      }else{
		         tt2.style.display="block";
		      }
		
		
		   }else{
              tt.style.display="block";
            }
		}
		
		function login2(){
		   if(u2.value=="123456"){
		      if(p2.value=="123456"){
		           tt2.style.display="none";
				   tt.style.display="none";
				   document.getElementById("dl2").innerHTML = "登录中......";
				   dl2.style.background="green";
				   jz2.style.display="block";
		      }else{
		         tt2.style.display="block";
		      }
		
		
		   }else{
		      tt.style.display="block";
		    }
		}
		
		var r="1"
		   shoujihao.onclick=function(){
		      if(r==1){
		      biaoge.style.height="964px";
		      shoujihao.style.background="#84ecbb";
			   
			  
		       r="0";
		     }else{
		        biaoge.style.height="0px";
		       jz2.style.display="none";
			   dl2.value="登录";
			   shoujihao.style.background="#2CC17B";
		        r="1";
		}
		}
		
		tt.onclick=function tcxs(){
			tt2.style.display="none";
			tt.style.display="none";
		}
		tt2.onclick=function tcxs2(){
			tt2.style.display="none";
			tt.style.display="none";
		}
	</script>
</html>
